<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">

	<pm:page title="Components">

		<style>
.th-groups th {
	text-align: center;
	background-color: rgba(0, 0, 0, .1);
	border-right: 1px solid #fff;
}

.ui-li-custom .ui-li-count {
	right: 10px !important;
}
</style>

 <f:facet name="postinit">            
            <link rel="stylesheet" href="#{request.contextPath}/javax.faces.resource/calendar/calendar.css.jsf?ln=primefaces-mobile" />
            <h:outputScript library="primefaces-mobile" name="calendar/calendar.js" />            

            <script type="text/javascript">
                (function($) {
                    $.mobiscroll.i18n['pt_BR'] = $.extend($.mobiscroll.i18n['pt_BR'], {
                        dateFormat: 'dd/mm/yy',
                        dateOrder: 'ddMMyy',
                        dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
                        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                        dayText: 'Dia',
                        hourText: 'Hora',
                        minuteText: 'Minutos',
                        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                        monthText: 'Mês',
                        secText: 'Segundo',
                        timeFormat: 'HH:ii',
                        timeWheels: 'HHii',
                        yearText: 'Ano',
                        setText: 'Selecionar',
                        cancelText: 'Cancelar',
                        nowText: 'Agora'
                    });
                })(jQuery);
            </script>
        </f:facet>   


		<pm:view id="send" >
			<pm:header title="Drop File">
				<pm:navBar>
					<p:button value="Send" icon="home" href="#send?reverse=true"
						styleClass="ui-btn-active ui-state-persist" />
					<p:button value="My Files" icon="info" href="#myfiles?reverse=true" />
					<p:button value="Admin" icon="search" href="#admin?reverse=true" />
				</pm:navBar>

			</pm:header>
			
			<h:form>
			
			<p:inputText label="To:" value="#{dropFileMessage.to}"/>
			
			<p:inputText label="Subject:" value="#{dropFileMessage.subject}"/>
			
			<p:inputTextarea id="inputTextarea" label="Message:" value="#{dropFileMessage.message}"/>

			
		
  			
 

                    <h3>Basic</h3>                    
                    <h4>Inline</h4>
                    <p:calendar value="#{calendarBean.date1}" mode="inline"/>

			<p:selectBooleanCheckbox 
			id="returnRecipt" value="false" itemLabel="Return Recipt" label="Return Recipt"/>


			
			
			<p:selectBooleanCheckbox 
			id="deleteAfterDownload" value="false" itemLabel="Delete After Download" label="Delete After Download"/>
			<p:selectBooleanCheckbox 
			id="public" value="false" itemLabel="Public" label="Public"/>
			  
                        <h:outputLabel for="txt" value="Text:" />
                        <p:inputText id="txt" value="#{dropFileMessage.to}" />
			  
			  
			<p:commandButton value="Send!" icon="refresh" iconPos="right" update="outTo" process="@form">
                    <f:attribute name="swatch" value="e" />
            </p:commandButton>


				<h:outputText id="outTo" value="#{dropFileMessage.to}"></h:outputText>
         </h:form>     
					
		 <pm:content>			
			 <p:dataList paginator="true" rows="10" value="#{tableBean.cars}" var="car"> 
                    <f:attribute name="paginatorText" value="More Cars.." />
                    <h:outputLink value="#lists">                                                
                        <h2>#{car.model}</h2>                                                
                        <p><strong>#{car.color}</strong></p>   
                        <p>#{car.manufacturer}</p>                        
                        <p class="ui-li-aside" >#{car.year}</p>                        
                    </h:outputLink>                    
                </p:dataList>  
		</pm:content>
 
		</pm:view>

		<pm:view id="myfiles" >
			<pm:header title="Drop File">
				<pm:navBar>
					<p:button value="Send" icon="home" href="#send?reverse=true" />
					<p:button value="My Files" icon="info" href="#myfiles?reverse=true"
						styleClass="ui-btn-active ui-state-persist" />
					<p:button value="Admin" icon="search" href="#admin?reverse=true" />
				</pm:navBar>

			</pm:header>

			<p:panel header="Received" collapsed="true">
				 <p:dataList value="#{ringBean.players}" var="player">  
                    <f:attribute name="iconSplit" value="true" />                    
                    <h:outputLink value="#lists">
                        <f:attribute name="icon" value="gear" />
                        <p:graphicImage value="/images/barca/#{player.photo}" />
                        <h2>#{player.name}</h2>                                                
                        <p>#{player.position}</p>                                                                        
                        <h:outputText styleClass="ui-li-count" value="#{player.number}" />                                                
                    </h:outputLink>
                    <h:outputLink value="#lists"></h:outputLink>
                </p:dataList>
			</p:panel>
			<p:panel header="Expiring This Week" collapsed="true">
				 <p:dataList value="#{ringBean.players}" var="player">  
                    <f:attribute name="iconSplit" value="true" />                    
                    <h:outputLink value="#lists">
                        <f:attribute name="icon" value="gear" />
                        <p:graphicImage value="/images/barca/#{player.photo}" />
                        <h2>#{player.name}</h2>                                                
                        <p>#{player.position}</p>                                                                        
                        <h:outputText styleClass="ui-li-count" value="#{player.number}" />                                                
                    </h:outputLink>
                    <h:outputLink value="#lists"></h:outputLink>
                </p:dataList>
			</p:panel>
			<p:panel header="Sent" collapsed="true">
				 <p:dataList value="#{ringBean.players}" var="player">  
                    <f:attribute name="iconSplit" value="true" />                    
                    <h:outputLink value="#lists">
                        <f:attribute name="icon" value="gear" />
                        <p:graphicImage value="/images/barca/#{player.photo}" />
                        <h2>#{player.name}</h2>                                                
                        <p>#{player.position}</p>                                                                        
                        <h:outputText styleClass="ui-li-count" value="#{player.number}" />                                                
                    </h:outputLink>
                    <h:outputLink value="#lists"></h:outputLink>
                </p:dataList>
			</p:panel>



		</pm:view>

		<pm:view id="admin">
			<pm:header title="Drop File">
				<pm:navBar>
					<p:button value="Send" icon="home" href="#send?reverse=true" />
					<p:button value="My Files" icon="info" href="#myfiles?reverse=true" />
					<p:button value="Admin" icon="search" href="#admin?reverse=true"
						styleClass="ui-btn-active ui-state-persist" />
				</pm:navBar>

			</pm:header>


			<p:panel header="My Account" collapsed="true">
				<p:inputText label="Name:" value="Luigi"/>
				<p:inputText label="Surname:" value="Toziani"/>
				<p:inputText label="Email:" value="luigi.toziani@primeur.com"/>
			</p:panel>
			<p:panel header="Configuration" collapsed="true">
				<p:inputText label="Config 1:" value="10"/>
				<p:inputText label="Config 2:" value="200"/>
				<p:inputText label="Config 3:" value="100"/>
			</p:panel>
		</pm:view>

		


	</pm:page>

</f:view>
